<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">部门管理</h3>

                <div class="box-tools">
                    <div class="input-group input-group-sm" style="width: 100px;">
                        <div class="input-group-btn">

                            <button class="btn btn-default btn-delete"
                                    type="button">删除
                            </button>
                            <button class="btn btn-default btn-add" type="button">添加</button>
                            <button class="btn btn-default btn-update" type="button">修改</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover" id="gridTreeTable">
                    <thead>
                    <tr>
                        <th data-checkbox="true" data-field="selectItem"></th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <!-- /.box -->
    </div>
</div>
<script src="bower_components/treegrid/jquery.treegrid.extension.js" type="text/javascript"></script>
<script src="bower_components/treegrid/jquery.treegrid.min.js" type="text/javascript"></script>
<script src="bower_components/treegrid/tree.table.js" type="text/javascript"></script>
<script type="text/javascript">
    /**
     * 初始化表格的列
     */
    var columns = [
        {
            field: 'selectItem',
            radio: true
        },
        {
            title: 'ID',
            field: 'id',
            visible: false,
            align: 'center',
            valign: 'middle',
            width: '80px'
        },
        {
            title: '名称',
            field: 'name',
            align: 'center',
            valign: 'middle',
            sortable: true,
            width: '130px'
        },
        {
            title: '上级机构',
            field: 'parentName',
            align: 'center',
            valign: 'middle',
            sortable: true,
            width: '100px'
        },
        {
            title: '排序号',
            field: 'sort',
            align: 'center',
            valign: 'middle',
            sortable: true,
            width: '70px'
        }
    ];

    $(function () {
        doGetObjects();
        $(".input-group-btn")
            .on("click", ".btn-delete", doDeleteObject)
            .on("click", ".btn-add,.btn-update", doLoadEditUI);
    })

    function doLoadEditUI() {
        var title;
        if ($(this).hasClass("btn-add")) {
            title = "添加部门"
        } else if ($(this).hasClass("btn-update")) {
            title = "修改部门"
            //获取选中的记录数据
            var rowData = doGetCheckedItem();
            if (!rowData) {
                alert("请选择一个");
                return;
            }
            $("#mainContentId").data("rowData", rowData);
        }
        var url = "dept/dept_edit";
        $("#mainContentId").load(url, function () {
            $(".box-title").html(title);
        })
    }

    function doGetCheckedItem() {
        var tr =
            $("tbody input[type='radio']:checked")
                .parents("tr");
        var rowData = tr.data("rowData");
        console.log(rowData);
        return rowData;
    }

    function doDeleteObject() {
        //1.url
        var url = "dept/doDeleteObject";
        //2.params
        var id = doGetCheckedId();
        if (!id) {
            alert("请先选择一条记录");
            return;
        }
        var params = {"id": id};
        //3.post
        $.post(url, params, function (result) {
            if (result.state == 1) {
                alert(result.message);
                doGetObjects();
            } else {
                alert(result.message);
            }
        })
    }

    function doGetCheckedId() {
        //获取选中的记录对象
        var selections = $("#gridTreeTable")
            //这个函数固定写法，记住即可
            //假如要理解这个方法可参考jquery.treegrid.extension.js
            .bootstrapTreeTable("getSelections");
        //判定是否有选中的
        if (selections.length > 0) {
            //返回选中记录的id值
            return selections[0].id;
        }
    }

    function doGetObjects() {
        //1.构建treeTable对象
        var tableId = "gridTreeTable";
        var url = "dept/doFindObjects";
        var treeTable =
            new TreeTable(tableId, url, columns)
        //2.初始化treeTable
        treeTable.setExpandColumn(2);//设置可展开的列，默认为1
        treeTable.init();
    }
</script>
